* {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .box {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .box ul{
      position: relative;
      width: 300px;
      height: 300px;
      display: flex;
  }
  .box ul li{
      width: 300px;
      height: 300px;
  }
  .box ul li img{
      width: 300px;
      height: 300px;
      position: absolute;
      left: 0;
      top: -300px;
      transition: all 0.5s ease;
  }
  .sbox{
      width: 300px;
      height: 100px;
      margin: 0 auto;
      position: relative;
      left: 0;
      overflow: hidden;
  }
  .sbox ul{
      position: relative;
      width: 800px;
      height: 100px;
      display: flex;
      left: -100px;
  }
  .sbox ul li{
      width: 100px;
      height: 100px;
      float: left;
      background-color: gray;
  }
  .sbox ul li img{
      width: 80px;
      height: 80px;
      padding: 10px 10px 10px 10px;
  }
  .ser{
      margin: 0 auto;
      width: 300px;
      height: 60px;
      position: absolute;
      top: 120px;
      z-index: 10;
  }
  .left{
      display: none;
      float: left;
      width: 60px;
      height: 60px;
      background:url(../img/btn.gif) 0 0 no-repeat;
  }
  .right{
      float: right;
      background:url(../img/btn.gif) 0 -60px no-repeat;
  }
  .gray{
      width: 300px;
      height: 100px;
      margin: 0 auto;
      position: absolute;
      top: 0;
  }
  .grayon{
      width: 100px;
      height: 100px;
      float: left;
      background: rgb(202,203,202,.7);
      cursor: pointer;
  }
  .grayon:hover{
      background: rgb(202,203,202,0);
  }